<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的办结</title>
    <#include "/pubHeadStyleTree.html">
</head>
<body>


<div style="position: relative;height: 100%;">
    <div class="ccpui-trees" >
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;" >
            <ul class="ccpui-iconTree iconTrees">
                <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                <input type="text" style="width: 50%" class="catZtreeValue">
            </ul>
            <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent" style="position: absolute;top:10px;right:10px;bottom: 0;left: 250px">
        <table id="myCompletedList" lay-filter="myCompletedList" ></table>
    </div>
</div>


<!--表格序列号-->
<script type="text/html" id="serialNum">
    {{d.LAY_TABLE_INDEX + 1}}
</script>
<script type="text/html" id="headerToolsBar">
    <div class="ccpui-enterSel">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-sm" lay-event="query">
            <i class="layui-icon layui-icon-search"></i>
            <span>查询</span>
        </a>
        <a class="layui-btn layui-btn-sm" lay-event="reset">
            <i class="layui-icon layui-icon-refresh"></i>
            <span>重置</span>
        </a>
    </div>
    <form class="layui-form" action="" lay-filter="myCompletedListQueryForm" style="margin-top:10px">
        <div class="table-top-filter">
            <div class="table-filter-alone">
                <label class="layui-form-label" style="margin-left: 110px">请求标题</label>
                <input type="text" name="Q_subject_SL" id="subject" class="layui-input filter-value" placeholder="请求标题"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="margin-left: 110px">流程名称</label>
                <input type="text" name="Q_processName_SL" id="processName" class="layui-input filter-value"
                       placeholder="流程名称"/>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="margin-left: 110px">状态</label>
                <select name="status" id="status" class="layui-input filter-value">
                    <option value="">所有</option>
                    <option value="2">结束</option>
                    <option value="3">人工结束</option>
                    <option value="10">逻辑删除</option>
                </select>
            </div>
            <div class="table-filter-alone">
                <label class="layui-form-label" style="margin-left: 110px">创建时间</label>
                <input type="text" name="Q_createTime_DL" id="createTime" class="layui-input filter-value"
                       placeholder="开始时间"/>
                <span style="float:left;margin-left:46px">至</span>
                <input type="text" name="Q_endCreateTime_DG" id="endCreateTime" class="layui-input filter-value"
                       placeholder="结束时间"
                       style="margin-left:60px"/>
            </div>
        </div>
    </form>
    </div>
</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="design">设计</a>
    {{#  if(d.status ==0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="deploy">发布</a>
    {{#  } }}
    {{#  if(d.status !=0){ }}
    <a class="layui-btn layui-btn-xs" lay-event="setting">设置</a>
    {{#  } }}
    {{#  if(d.status==1||d.status==4){ }}
    <a class="layui-btn layui-btn-xs" lay-event="run2">启动</a>
    <a class="layui-btn layui-btn-xs" lay-event="run">旧平台启动</a>
    {{#  } }}
    <a class="layui-btn layui-btn-xs" lay-event="clear">清除数据</a>
</script>

<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','table', 'layer', 'laydate', 'form', 'util', 'commons', 'setter', 'totalFilter', 'common'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        var $ = layui.$;
        var setter = layui.setter;
        var laydate = layui.laydate;
        var commons = layui.commons;
        var common = layui.common;
        var totalFilter = layui.totalFilter;

        var tableH = commons.tabHeight();

        catZtree();
        loadTable(serverPath.workflowPath + setter.workflowLinkPath + 'processRun/list/myCompletedList');

        function catZtree() {
            $.ajax({
                url: serverPath.workflowPath + setter.workflowLinkPath+"processRun/getMyRequestAndMyCompletedType?category=" + 'myCompleted',
                type: "post",
                dataType: 'json',
                async: false,
                success: function (data) {
                    var zNodes = data.data;
                    var setting = {
                        view: {
                            showLine: false,
                            nameIsHTML: true, //允许name支持html
                            selectedMulti: false
                        },
                        edit: {
                            enable: false,
                            editNameSelectAll: false
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                idKey: "typeId",
                                pIdKey: "parentId"

                            },
                            key: {
                                name: "typeName"
                            }
                        },

                        callback: {
                            onClick: onClickType,
                        }
                    };
                    $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                    component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                },
            });
        }

        //点击左树事件
        function onClickType(event, treeId, treeNode) {
            var selectTypeId = treeNode.typeId;
            var nodePath = treeNode.nodePath;
            var url = serverPath.workflowPath + setter.workflowLinkPath + 'processRun/list/myCompletedList?typeId=' + selectTypeId + '&nodePath=' + nodePath;
            if (null == treeNode.parentId) {
                url = serverPath.workflowPath + setter.workflowLinkPath + 'processRun/list/myCompletedList';
            }
            loadTable(url);
        }

        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });


        //第一个实例

        function loadTable(url) {
            table.render({
                elem: '#myCompletedList'
                , cellMinWidth: 80
                , title: '流程定义模型'
                , height: tableH
                , url: url
                , method: 'post'
                , toolbar: '#headerToolsBar'
                ,defaultToolbar: ['filter', 'print']
                , page: true
                ,autoSort: false
                , cols: [[
                    /* {type: 'checkbox'}*/
                    {field: 'runId', title: '序号', align: 'center', width: 80, templet: '#serialNum'}
                    , {
                        field: 'subject',
                        title: '请求标题',
                        sort: true,
                        minWidth: 350,
                        align: 'center',
                        event: 'detail',
                        style: 'color:#1E9FFF; cursor:pointer'
                    }

                    , {
                        field: 'processName', title: '流程名称', sort: true, align: 'center'
                    }
                    , {
                        field: 'createTime', title: '创建时间',minWidth: 200, sort: true, align: 'center', templet: function (d) {
                            return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                        }
                    }
                    , {
                        field: 'duration', title: '持续时间', sort: true, align: 'center', templet: function (d) {
                            //计算出相差天数
                            var days = Math.floor(d.duration / (24 * 3600 * 1000))
                            //计算出小时数
                            var leave1 = d.duration % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
                            var hours = Math.floor(leave1 / (3600 * 1000))
                            //计算相差分钟数
                            var leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
                            var minutes = Math.floor(leave2 / (60 * 1000))
                            return days + "天" + hours + "时" + minutes + "分";

                        }
                    }
                    , {field: 'typeName', title: '类型', sort: true, align: 'center'}
                    , {
                        field: 'status',
                        title: '状态',
                        sort: true,
                        align: 'center',
                        style: 'color: #af0000;',
                        templet: function (d) {
                            if (d.status == 2) {
                                return "<span style='color: #af0000'>结束</span>";
                            } else if (d.status == 3) {
                                return "<span style='color: #af0000'>人工结束</span>";
                            } else if (d.status == 10) {
                                return "<span style='color: #af0000'>逻辑删除</span>";
                            }
                        }
                    }
                ]],
                done:function () {
                    table.resize('myCompletedList');
                    commons.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
                    common.tableSelectCon('.ccpui-enterSel .layui-form input','a[lay-event=query]','.ccpui-enterSel')
                }
            });
            totalFilter.init('myCompletedList');
        }

        table.on('toolbar(myCompletedList)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("myCompletedList", "myCompletedListQueryForm", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("myCompletedList", "myCompletedListQueryForm", {where: {}}, true);
                    break;
            }
        });
        table.on('tool(myCompletedList)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'detail':
                    layer.open({
                        type: 2,
                        title: "流程明细",
                        area:['1000px', '630px'],
                        content:  serverPath.workflowPath  + setter.workflowLinkPath +'processRun/view/info?runId=' + data.runId
                    });
                    break;
            }
        });


        commons.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        window.Initialization = function () {
            commons.reflashDate({startName: '#createTime', endName: '#endCreateTime'});
        };
        common.tableSort("myCompletedList",{show:window.Initialization});
    });


</script>
</body>
</html>
